<html>
	<head>
		<title>drawing-area.js Example</title>
		<script src="jquery.min.js" type="text/javascript"></script>
		<script src="drawing-area.js" type="text/javascript"></script>
		<!--[if lt IE 9]>
		<script src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
		<![endif]-->
		
		<script>
			var board = new drawingArea({
							cWidth: 640,
							cHeight: 480
						});
						
			var board2 = new drawingArea({
							cWidth: 640,
							cHeight: 480
						});

			$(document).ready(function() {
				board.init('myCanvas');
				board2.init('myCanvas2');
				
				$('#myCanvas')
					.bind('lineEnd', function(e, lastLineStartFrame, lastLineEndFrame, lastLineColor, lastLineWidth) {
						var img = board.getImage(lastLineStartFrame, lastLineEndFrame);
						var size = img.length;
						var m = ' bytes';
						if (size >= 1024) {
							size /= 1024;
							m = 'kb'
						}
						$('#lastLineSize1').html('Last line size: '+size+m);
						board2.replay(img);
					});
				$('#myCanvas2')
					.bind('lineEnd', function(e, lastLineStartFrame, lastLineEndFrame, lastLineColor, lastLineWidth) {
						var img = board2.getImage(lastLineStartFrame, lastLineEndFrame);
						var size = img.length;
						var m = ' bytes';
						if (size >= 1024) {
							size /= 1024;
							m = 'kb'
						}
						$('#lastLineSize2').html('Last line size: '+size+m);
						board.replay(img);
					});
			});
		</script>
		
		<style type="text/css">
			canvas {
				border: 1px solid #999;
			}
		</style>
	</head>
	<body>
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td><canvas id="myCanvas" width="640" height="480"></canvas></td>
				<td><canvas id="myCanvas2" width="640" height="480"></canvas></td>
			</tr>
			<tr>
				<td>
					<input type="button" value="RED" onclick="board.setColor('#FF0000');" />
					<input type="button" value="GREEN" onclick="board.setColor('#00FF00');" />
					<input type="button" value="BLUE" onclick="board.setColor('#0000FF');" />
					<input type="button" value="BLACK" onclick="board.setColor('#000000');" />
					<input type="button" value="WHITE" onclick="board.setColor('#FFFFFF');" />
					&nbsp;&nbsp;&nbsp;
					<select onchange="board.setWidth(this.value);">
						<option value="2">2px</option>
						<option value="5">5px</option>
						<option value="10">10px</option>
						<option value="15">15px</option>
						<option value="20">20px</option>
						<option value="50">50px</option>
						<option value="100">100px</option>
					</select>
					&nbsp;&nbsp;&nbsp;
					<input type="button" value="Clear" onclick="board.clear();" /><br />
					<span id="lastLineSize1"></span>
				</td>
				<td>
					<input type="button" value="RED" onclick="board2.setColor('#FF0000');" />
					<input type="button" value="GREEN" onclick="board2.setColor('#00FF00');" />
					<input type="button" value="BLUE" onclick="board2.setColor('#0000FF');" />
					<input type="button" value="BLACK" onclick="board2.setColor('#000000');" />
					<input type="button" value="WHITE" onclick="board2.setColor('#FFFFFF');" />
					&nbsp;&nbsp;&nbsp;
					<select onchange="board2.setWidth(this.value);">
						<option value="2">2px</option>
						<option value="5">5px</option>
						<option value="10">10px</option>
						<option value="15">15px</option>
						<option value="20">20px</option>
						<option value="50">50px</option>
						<option value="100">100px</option>
					</select>
					&nbsp;&nbsp;&nbsp;
					<input type="button" value="Clear" onclick="board2.clear();" /><br />
					<span id="lastLineSize2"></span>
				</td>
			</tr>
		</table>
	</body>
</html>
